<template>
  <div
    v-show="visible"
    :style="{ left: leftValue, top: topValue }"
    class="content"
  >
    <div class="mask" @click.stop.prevent="cancelSelect"></div>
    <div class="main">
      <ul class="area-select">
        <li
          v-show="!(index === 0 && addressLv === 4)"
          v-for="(item, index) in areaMain"
          :key="index"
          :class="{ hasSelect: index === hasSelectIndex, item4: addressLv === 4 }"
          @click="changeArea(index)"
        >
          {{ item }}
        </li>
      </ul>
      <ul class="address-select">
        <div v-show="hasSelectIndex === 0 && addressLv !== 4">
          <li
            v-for="(item, index) in province"
            :key="index"
            :class="{ 'select-li-provice': index === pSelectLiIndex }"
            @click="selectProvince(index)"
          >
            {{ item.value }}
          </li>
        </div>
        <div v-show="hasSelectIndex === 1">
          <li
            v-for="(item, index) in city"
            :key="index"
            :class="{ 'select-li-provice': index === cSelectLiIndex }"
            @click="selectCity(index)"
          >
            {{ item.value }}
          </li>
        </div>
        <div v-show="hasSelectIndex === 2">
          <li
            v-for="(item, index) in area"
            :key="index"
            :class="{ 'select-li-provice': index === aSelectLiIndex }"
            @click="selectArea(index)"
          >
            {{ item.value }}
          </li>
        </div>
        <div v-show="hasSelectIndex === 3">
          <li
            v-for="(item, index) in street"
            :key="index"
            :class="{ 'select-li-provice': index === sSelectLiIndex }"
            @click="selectStreet(index)"
          >
            {{ item.value }}
          </li>
        </div>
        <div v-show="hasSelectIndex === 4">
          <li
            v-for="(item, index) in community"
            :key="index"
            :class="{ 'select-li-provice': index === ySelectLiIndex }"
            @click="selectCommunity(index)"
          >
            {{ item.value }}
          </li>
        </div>
      </ul>
      <div class="footer">
        <el-button type="default" size="small" @click="cancelSelect"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="submitSelect" :disabled="!isLast" :class="!isLast ? 'disabled' : ''"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyAddress',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    addressLv: {
      type: Number,
      default: 5
    },
    leftValue: {
      // 定位的离左边的距离
      type: String,
      default: '50%'
    },
    topValue: {
      // 定位的离上边的距离
      type: String,
      default: '50%'
    },
    isEmpty: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isLast: false,
      areaMain: ['省', '市', '区', '街道', '社区'],
      hasSelectIndex: 0, // 控制显示第几个
      province: [], // 循环的省份的值
      city: [], // 循环的城市的值
      area: [], // 循环的地区的值
      street: [], // 循环的街道的值
      community: [], // 循环的社区的值
      pid: '', // 省份id
      cid: '', // 城市id
      aid: '', // 地区id
      sid: '', // 街道id
      yid: '', // 社区id
      pSelectLiIndex: '', // 选中的省的下标
      cSelectLiIndex: '', // 选中的城市的下标
      aSelectLiIndex: '', // 选中的地区的下标
      sSelectLiIndex: '', // 选中的街道的下标
      ySelectLiIndex: '', // 选中的社区的下标
      addressDetail: [], // 传给父组件的地址名称
      addressId: [], // 传给父组件的地址id
      addressCode: [] // 传给父组件的地址code
    }
  },
  watch: {
    isEmpty: function (newV, oldV) {
      if (newV) {
        this.pSelectLiIndex = ''
        this.cSelectLiIndex = ''
        this.aSelectLiIndex = ''
        this.sSelectLiIndex = ''
        this.ySelectLiIndex = ''
        this.pid = ''
        this.cid = ''
        this.aid = ''
        this.sid = ''
        this.yid = ''
        this.hasSelectIndex = 0
        this.addressId = []
        this.addressCode = []
        this.province = []
        this.city = []
        this.area = []
        this.street = []
        this.community = []
        // this.$emit("getAddressDetail", this.addressDetail, this.addressId); // 此时，父组件需通过addressId的长度是否为0来判断是否将传递过来的isEmpty设置为false ，重置选择框的值
      }
    },
    visible (newV) {
      if (newV) {
        this.getAllProvince()
        this.stopMove()
      } else {
        this.Move()
      }
    },
    addressLv (val) {
      if (val === 4) {
        this.pid = 283585
        this.pSearchC()
      }
    }
  },
  methods: {
    // 取消选择
    cancelSelect () {
      this.$emit('cancel')
    },
    // 确定选择
    submitSelect () {
      this.$emit('submit', this.addressDetail, this.addressCode)
    },
    changeArea (index) {
      // 切换模块
      switch (
        index // 判断是否上级有值，如果上级没值则不能切换
      ) {
        case 1:
          if (!this.pid) {
            return
          }
          break
        case 2:
          if (!this.pid || !this.cid) {
            return
          }
          break
        case 3:
          if (!this.pid || !this.cid || !this.aid) {
            return
          }
          break
        case 4:
          if (!this.pid || !this.cid || !this.aid || !this.sid) {
            return
          }
          break
        default:
          break
      }
      this.hasSelectIndex = index
    },
    async getAllProvince () {
      // 获取省份列表
      this.getXzqv(0).then(res => {
        this.province = res
      })
    },
    // 加载行政区划
    getXzqv (id) {
      return new Promise((resolve, reject) => {
        let params = {
          url: `${this.$api.getXzqhList.url}/${id}`,
          method: 'get'
        }
        this.$http(params).then(res => {
          if (res.code === 200) {
            resolve(res.data)
          }
        })
      })
    },
    // 选择省份执行的事件
    selectProvince (index) {
      this.addressDetail = []
      this.addressId = []
      this.addressCode = []
      this.pid = this.province[index].id
      this.cid = ''
      this.aid = ''
      this.sid = ''
      this.yid = ''
      this.pSelectLiIndex = index
      this.cSelectLiIndex = ''
      this.aSelectLiIndex = ''
      this.sSelectLiIndex = ''
      this.ySelectLiIndex = ''
      this.city = [] // 循环的城市的值
      this.area = [] // 循环的地区的值
      this.street = [] // 循环的街道的值
      this.community = [] // 循环的社区的值
      this.addressId[0] = this.province[index].id
      this.addressCode[0] = this.province[index].code
      this.addressDetail[0] = this.province[index].value
      this.$emit('getAddressDetail', this.addressDetail, this.addressCode)
      this.pSearchC()
    },
    // 省份查找城市
    pSearchC () {
      this.getXzqv(this.pid).then(res => {
        if (!res.length) {
          this.isLast = true
          return
        }
        this.isLast = false
        // 获取省份下城市的列表
        this.city = res
        this.hasSelectIndex = 1
        if (this.city.length === 1) {
          // 如果只有一条数据，则默认选中并执行下一次查找,其他位置同理
          this.hasSelectIndex = 2
          this.cSelectLiIndex = 0
          this.cid = this.city[0].id
          this.aid = ''
          this.sid = ''
          this.yid = ''
          this.addressId.splice(1, this.addressId.length - 1)
          this.addressCode.splice(1, this.addressCode.length - 1)
          this.addressDetail.splice(1, this.addressId.length - 1)
          this.addressId[1] = this.city[0].id
          this.addressCode[1] = this.city[0].code
          this.addressDetail[1] = this.city[0].value
          this.$emit('getAddressDetail', this.addressDetail, this.addressCode)
          this.cSearchA()
        }
      })
    },
    // 选择市执行的事件
    selectCity (index) {
      this.cid = this.city[index].id
      this.aid = ''
      this.sid = ''
      this.yid = ''
      this.cSelectLiIndex = index
      this.aSelectLiIndex = ''
      this.sSelectLiIndex = ''
      this.ySelectLiIndex = ''
      this.area = [] // 循环的地区的值
      this.street = [] // 循环的街道的值
      this.community = [] // 循环的社区的值
      this.addressId.splice(index, this.addressId.length - 1)
      this.addressCode.splice(index, this.addressCode.length - 1)
      this.addressId[1] = this.city[index].id
      this.addressCode[1] = this.city[index].code
      this.addressDetail.splice(1, this.addressDetail.length - 1)
      this.addressDetail[1] = this.city[index].value
      this.$emit('getAddressDetail', this.addressDetail, this.addressCode)
      this.cSearchA()
    },
    // 市查找区
    cSearchA () {
      this.getXzqv(this.cid).then(res => {
        if (!res.length) {
          this.isLast = true
          return
        }
        this.isLast = false
        // 获取城市下地区的列表
        this.area = res
        this.hasSelectIndex = 2
        if (this.area.length === 1) {
          this.hasSelectIndex = 3
          this.aSelectLiIndex = 0
          this.aid = this.area[0].id
          this.sid = ''
          this.yid = ''
          this.addressId.splice(2, this.addressId.length - 1)
          this.addressCode.splice(2, this.addressCode.length - 1)
          this.addressDetail.splice(2, this.addressId.length - 1)
          this.addressId[2] = this.area[0].id
          this.addressCode[2] = this.area[0].code
          this.addressDetail[2] = this.area[0].value
          this.$emit('getAddressDetail', this.addressDetail, this.addressCode)
          this.aSearchS()
        }
      })
    },
    // 选择区执行的事件
    selectArea (index) {
      this.aid = this.area[index].id
      this.sid = ''
      this.yid = ''
      this.aSelectLiIndex = index
      this.sSelectLiIndex = ''
      this.ySelectLiIndex = ''
      this.street = [] // 循环的街道的值
      this.community = [] // 循环的社区的值
      this.addressId.splice(2, this.addressId.length - 1)
      this.addressCode.splice(2, this.addressCode.length - 1)
      this.addressId[2] = this.area[index].id
      this.addressCode[2] = this.area[index].code
      this.addressDetail.splice(2, this.addressId.length - 1)
      this.addressDetail[2] = this.area[index].value
      this.$emit('getAddressDetail', this.addressDetail, this.addressCode)
      this.aSearchS()
    },
    // 区查找街道
    aSearchS () {
      this.getXzqv(this.aid).then(res => {
        if (!res.length) {
          this.isLast = true
          return
        }
        this.isLast = true
        // 获取地区下街道的列表
        this.street = res
        this.hasSelectIndex = 3
        if (this.street.length === 1) {
          this.sSelectLiIndex = 0
          this.sid = this.street[0].id
          this.yid = ''
          this.addressId.splice(3, this.addressId.length - 1)
          this.addressCode.splice(3, this.addressCode.length - 1)
          this.addressDetail.splice(3, this.addressId.length - 1)
          this.addressId[3] = this.street[0].id
          this.addressCode[3] = this.street[0].code
          this.addressDetail[3] = this.street[0].value
          this.$emit('getAddressDetail', this.addressDetail, this.addressCode)
          this.sSearchY()
        }
      })
    },
    // 选择区执行的事件
    selectStreet (index) {
      this.sid = this.street[index].id
      this.yid = ''
      this.sSelectLiIndex = index
      this.ySelectLiIndex = ''
      this.community = [] // 循环的社区的值
      this.addressId[3] = this.street[index].id
      this.addressCode[3] = this.street[index].code
      this.addressDetail[3] = this.street[index].value
      this.$emit('getAddressDetail', this.addressDetail, this.addressCode)
      this.sSearchY()
    },
    // 街道查找社区
    sSearchY () {
      this.getXzqv(this.sid).then(res => {
        if (!res.length) {
          this.isLast = true
          return
        }
        this.isLast = true
        // 获取街道下社区的列表
        this.community = res
        this.hasSelectIndex = 4
        if (this.community.length === 1) {
          this.ySelectLiIndex = 0
          this.yid = this.community[0].id
          this.addressId.splice(4, this.addressId.length - 1)
          this.addressCode.splice(4, this.addressCode.length - 1)
          this.addressDetail.splice(4, this.addressId.length - 1)
          this.addressId[4] = this.community[0].id
          this.addressCode[4] = this.community[0].code
          this.addressDetail[4] = this.community[0].value
          this.$emit('getAddressDetail', this.addressDetail, this.addressCode)
        }
      })
    },
    // 选择区执行的事件
    selectCommunity (index) {
      this.isLast = true
      this.yid = this.community[index].id
      this.ySelectLiIndex = index
      this.addressId[4] = this.community[index].id
      this.addressCode[4] = this.community[index].code
      this.addressDetail[4] = this.community[index].value
      this.$emit('getAddressDetail', this.addressDetail, this.addressCode)
    },
    // 停止页面滚动
    stopMove () {
      let m = function (e) { e.preventDefault() }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', m, { passive: false }) // 禁止页面滑动
    },
    // 开启页面滚动
    Move () {
      let m = function (e) { e.preventDefault() }
      document.body.style.overflow = '' // 出现滚动条
      document.removeEventListener('touchmove', m, { passive: true })
    }
  }
}
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.content {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px 5px #ccc;
  width: 100%;
  height: 100%;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .main {
    width: 322px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .area-select {
    width: 320px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid #cccccc;
    li {
      list-style: none;
      float: left;
      height: 38px;
      line-height: 38px;
      text-align: center;
      background: #f0f0f0;
      width: 20%;
      cursor: pointer;
      font-size: 14px;
    }
    .hasSelect {
      background: #ffffff;
    }
    .item4 {
      width: 25%;
    }
  }
  .address-select {
    width: 300px;
    margin: 0;
    padding: 5px 10px;
    overflow-y: scroll;
    height: 320px;
    border: 1px solid #cccccc;
    border-top: 0;
    li {
      height: 40px;
      padding: 10px 5px;
      line-height: 20px;
      cursor: pointer;
      font-size: 14px;
    }
    .select-li-provice {
      color: #02579a;
      cursor: default;
      font-weight: bold;
    }
    li:hover {
      color: #02579a;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    .el-button {
      padding: 0;
      width: 120px;
      height: 30px;
      line-height: 28px;
      border-radius: 0;
      border: 1px solid #02579a;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      background: #02579a;
      margin-left: 20px;
      &.el-button--default {
        color: #02579a;
        background: #fff;
        margin: 0;
      }
      &.disabled {
        opacity: 0.5;
      }
    }
  }
}
</style>
